<template>
  <div class="common-table card vertical-adaptive">
    <header-point :title="title" :item-list="itemList" />
    <div class="adaptive">
      <vxe-table
        ref="infoTable"
        height="auto"
        v-bind="$attrs"
        :data="data"
        :loading="loading"
        :checkbox-config="showHeader"
        highlight-hover-row
        v-on="$listeners"
      >
        <!-- 展开列 -->
        <vxe-table-column
          v-if="data.length > 0 && seqColumns.seq"
          type="seq"
          width="50"
        />
        <vxe-table-column
          v-if="data.length > 0 && seqColumns.checkbox"
          type="checkbox"
          width="30"
        />
        <template v-for="(item, index) in columnsItem">
          <!-- 有回调的 -->
          <vxe-table-column
            :key="index"
            :field="item.prop"
            :title="item.label"
            :width="item.width"
          >
            <template v-slot="scope">
              <item-option
                :option="item.option"
                :value="scope.row[item.prop]"
              />
            </template>
          </vxe-table-column>
        </template>
        <vxe-table-column
          v-if="data.length > 0 && displayColumn.operationCol"
          title="操作"
          align="center"
          :width="displayColumn.setBtn === true ? '230' : '130'"
          show-overflow
          fixed="right"
        >
          <template v-slot="scope">
            <el-tooltip content="修改" placement="top" effect="light">
              <el-button
                v-if="displayColumn.editBtn"
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="editBtn(scope)"
              />
            </el-tooltip>
            <el-tooltip content="删除" placement="top" effect="light">
              <el-button
                v-if="displayColumn.removeBtn"
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="removeBtn(scope)"
              />
            </el-tooltip>
            <el-tooltip content="岗位设置" placement="top" effect="light">
              <el-button
                v-if="displayColumn.setBtn"
                type="primary"
                size="mini"
                icon="el-icon-setting"
                @click="setBtn(scope)"
              />
            </el-tooltip>
            <el-tooltip content="科室设置" placement="top" effect="light">
              <el-button
                v-if="displayColumn.diagnoseBtn"
                type="primary"
                size="mini"
                icon="el-icon-data-analysis"
                @click="diagnoseBtn(scope)"
              />
            </el-tooltip>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <!-- 分页功能 -->
    <vxe-pager
      v-show="page.total > page.limit"
      :loading="loading"
      :current-page="page.curPage"
      :page-size="page.limit"
      :total="page.total"
      :layouts="[
        'PrevPage',
        'JumpNumber',
        'NextPage',
        'FullJump',
        'Sizes',
        'Total'
      ]"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
import ItemOption from './ItemOption'
import HeaderPoint from './HeaderPoint'
export default {
  name: 'CommonTable',
  components: {
    ItemOption,
    HeaderPoint
  },
  inheritAttrs: false,
  props: {
    data: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      defalut: false
    },
    columnsItem: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    itemList: {
      type: Array,
      default: () => []
    },
    // 默认配置表头全选勾选
    showHeader: {
      type: Object,
      default: () => ({
        checkStrictly: false
      })
    },
    // 配置序号的显示隐藏
    seqColumns: {
      type: Object,
      default: () => ({
        seq: true,
        checkbox: true
      })
    },
    // 操作一栏按钮的显示与影藏
    displayColumn: {
      type: Object,
      default: () => ({
        operationCol: false,
        width: '130',
        editBtn: false,
        removeBtn: false,
        setBtn: false,
        diagnoseBtn: false
      })
    },
    // 配置分页
    page: {
      type: Object,
      default: () => ({
        curPage: 1,
        limit: 10,
        total: 0
      })
    }
  },
  data() {
    return {
      labelConfig: {
        seq: true,
        checkbox: true
      },
      tablePage1: {
        currentPage: 1,
        pageSize: 3
      }
    }
  },
  created() {},
  methods: {
    // 点击修改
    editBtn(scope) {
      this.$emit('handlerEdit', scope)
    },
    // 根据id删除对应的数据
    removeBtn(scope) {
      this.$emit('removeRowData', scope)
    },
    // 设置按钮
    setBtn(scope) {
      this.$emit('setDialogBtn', scope)
    },
    // 诊断按钮
    diagnoseBtn(scope) {},
    // 点击分页
    handlePageChange({ currentPage, pageSize }) {
      const curPage = (this.page.curPage = currentPage)
      const limit = (this.page.limit = pageSize)
      this.$emit('changePage', curPage, limit)
    }
  }
}
</script>
<style lang="scss" scoped>
.common-table {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: #fff;
}
</style>
